<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>后台管理</title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- Fab Admin skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	
	
	<script src="../../js/jquery.min.js"></script>
	
	<script src="../../js/bootstrap.min.js"></script>

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body class="hold-transition skin-blue-light sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
		
	<!-- 顶部导航栏 -->
	<span id="mytop"></span>
	<span id="myleft"></span>
    <script>
        $(function(){
            /*公共部分
             * 导航栏
             */
            $("#mytop").load("navigation/header.html");
			$("#myleft").load("navigation/left.html");
        });
    </script>
  
	<!-- /顶部导航栏 -->

	<!-- 左侧导航栏 -->
	
	<!-- Left side column. contains the sidebar -->
	
	<!-- /左侧导航栏 -->

  <!-- =============================================== -->

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        	类别
      </h1>
    </section>

    <!-- Main content -->
    <!-- Main content -->
    <div class="box box-default">
            <!-- /.box-header -->
            <div class="box-body">
            	<!-- Nav tabs -->
				<ul class="nav nav-tabs nav-fill" role="tablist">
				<!-- 内部三个菜单类导航栏 -->
					<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#list" role="tab"><span class="hidden-sm-up"><i class="ion-person"></i></span> <span class="hidden-xs-down">类别列表</span></a> </li>
					<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#add" role="tab"><span class="hidden-sm-up"><i class="ion-home"></i></span> <span class="hidden-xs-down">添加类别</span></a> </li>
					<!-- <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages11" role="tab"><span class="hidden-sm-up"><i class="ion-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li> -->
				</ul>
				<!-- Tab panes -->
				<div class="tab-content tabcontent-border">
					<!-- 第一个panel开始 -->
					<div class="tab-pane" id="add" role="tabpanel">
						<section class="content">
							<!-- 添加类别 -->
						    <div class="row">
						        <div class="col-12 col-lg-9">
						            <div class="box box-solid bg-primary">
						                <div class="box-header">
						                    <h4 class="box-title">
						                        <strong>添加类别</strong>
						                    </h4>
						                </div>
						
						                <div class="box-body">
						    
						                    <!-- ajax 级联菜单-->
						
						                    <form action="insertCategory.category" method="post">
						                        <div class="form-body">
						                            <div class="row">
						                                <div class="col-md-6">
						                                    <div class="form-group">
						                                        <label class="text-info">类别名称</label>
						                                        <input type="text" class="form-control" name="name" required>
						                                    </div>
						                                </div>
						                                <!--/span-->
						                                <div class="col-md-6">
						                                    <div class="form-group">
						                                    </div>
						                                </div>
						                                <!--/span-->
						                            </div>
						                            <!--/row-->
						                            <!--/row-->
						                            <div class="row">
						                                <div class="col-md-6">
						                                    <div class="form-group">
						                                        <label class="text-info">类别等级</label>
						                                        <select class="form-control" id="grade" name="grade">
						                                            <option value="-1">----请选择----</option>
						                                        </select>
						                                    </div>
						                                </div>
						                                <!--/span-->
						                                <div class="col-md-6">
						                                    <div class="form-group">
						                                        <label class="text-info">是否为叶子结点</label>
						                                        <select class="form-control" id="leaf" name="leaf">
						                                            <option value="0">否</option>
						                                            <option value="1">是</option>
						                                        </select>
						                                    </div>
						                                </div>
						                                <!--/span-->
						                            </div>
						                            <div class="row">
						                                <div class="col-md-6">
						                                    <div class="form-group">
						                                        <label class="text-info">父级名称</label>
						                                        <select class="form-control" id="pid" name="pid">
						                                            <option value="-1">----请选择----</option>
						                                        </select>
						                                    </div>
						                                </div>
						                                <!--/span-->
						                                <div class="col-md-6">
						                                    <div class="form-group">
						
						                                    </div>
						                                </div>
						                                <!--/span-->
						                            </div>
						                            <!--/row-->
						                            <div class="row">
						
						                                <!--/span-->
						                            </div>
						                            <div class="row">
						                                <div class="col-md-12">
						                                    <div class="form-group">
						                                        <label class="text-info">描述</label>
						                                        <textarea class="form-control" rows="4" name="descr" required></textarea>
						                                    </div>
						                                </div>
						                            </div>
						                            <!--/row-->
						                            <div class="row">
						
						                            </div>
						                        </div>
						                        <div class="form-actions mt-10">
						                            <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> 保存</button>
						                            <button type="reset" class="btn btn-danger"> <i class="fa fa-close"></i> 重置</button>
						                        </div>
						                    </form>
						                    <script type="text/javascript">
						                        $(document).ready(function () {
						                                    $.ajax({
						                                            url: "../../../grade.category",
						                                            dataType: "json",
						                                            type: "get",
						                                            success: function (jsonGrades) {
						                                                $("#grade").html("<option value='-1'>----请选择----</option>");
						                                                for (let i = 0; i < jsonGrades.length; i++) {
						                                                    $("<option value='" + jsonGrades[i] + "'>" + jsonGrades[i]+ "</option>").appendTo("#grade")
						                                                }
						                                            }
						                                        });
						                                    $("#grade").change(function () {
						                                                $.ajax({
						                                                        url: "../../../p.category?grade=" + $("#grade").val(),
						                                                        dataType: "json",
						                                                        success: function (
						                                                            jsonPCategory) {
						                                                            $("#pid").html("<option value='-1'>----请选择----</option>");
						                                                            for (let i = 0; i < jsonPCategory.length; i++) {
						                                                                $("<option value='" + jsonPCategory[i].id + "'>" + jsonPCategory[i].name
						                                                                    + "</option>") .appendTo("#pid")
						                                                            }
						                                                        }
						                                                    });
						                                            });
						                                });
						                    </script>
						                </div>
						            </div>
						        </div>
						
						
						
						    </div>
						
						</section>
					</div>
					<!-- 第二个panel开始 -->
					<div class="tab-pane pad active" id="list" role="tabpanel">
						每页展示&nbsp;&nbsp; <label>
							<select id="productorder_length" name="productorder_length" aria-controls="productorder" class="form-control form-control-sm">
								<option value="10">10</option>
								<option value="25">25</option>
								<option value="50">50</option>
							</select>
						</label>&nbsp;&nbsp;条
						
						
					<!-- 查看所有类别，进行分页处理 -->
						<div class="table-responsive">
							<table id="productorder" class="table table-hover no-wrap product-order" data-page-size="12">
								<thead>
									<tr>
										 <th>id</th>
										 <th>name</th>
										 <th>descr</th>
										 <th>pid</th>
										 <th>leaf</th>
										 <th>grade</th>
										 <th>Actions</th>
									</tr>
								</thead>
								<tbody>
									<!-- 使用ajax向列表中添加数据 -->
									<script>
										$(document).ready(function() {
											
											/* 计算总页数 */
											/* 传过去每页展示条数，返回总页数 */
											function countPageNo(){
												$.ajax({
			                                            url: "../../../countPageNo.category",
			                                            dataType: "json",
			                                            type: "get",
			                                            data: {
			                                            	num: $("#productorder_length").val()
			                                            },
			                                            success: function (jsonPageNo) {
			                                                $("#sumPage").text(jsonPageNo);
			                                            }
			                                        }); 
											}
											countPageNo(num);
											/* 每页展示多少条数据 */
											var num = $("#productorder_length").val();
											/* 当前页码 */
											var curPage = $("#curPage").text();
		                                    $.ajax({
		                                            url: "../../../findByPageno.category",
		                                            dataType: "json",
		                                            type: "get",
		                                            data: {
		                                            	num: num,
		                                            	curPage: curPage
		                                            },
		                                            success: function (jsonAll) {
		                                                for (let i = 0; i < jsonAll.length; i++) {
		                                                	$(
		                                                		"<tr>"+
																"<td>"+jsonAll[i].id+"</td>"+
																"<td>"+jsonAll[i].name+"</td>"+
																"<td>"+jsonAll[i].descr+"</td>"+
																"<td>"+jsonAll[i].pid+"</td>"+
																"<td>"+jsonAll[i].leaf+"</td>"+
																"<td>"+jsonAll[i].grade+"</td>"+
																"<td><button type='button' data-id='"+jsonAll[i].id+"' data-name='"+jsonAll[i].name+"' data-descr='"+jsonAll[i].descr+"' data-pid='"+jsonAll[i].pid+"' data-leaf='"+jsonAll[i].leaf+"' data-grade='"+jsonAll[i].grade+"' class='btn btn-rounded btn-info btn-xs'  data-toggle='modal' data-target='#myModal'>"+
																"编辑</button>"+
																"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-rounded btn-danger btn-xs'onclick='del("+jsonAll[i].id+")'>删除</button></td></tr>"
															).appendTo("tbody");
		                                                }
		                                            }
		                                        });
		                                    /* 根据每页展示数据量的选择，展示数据 */
		                                    $("#productorder_length").change(function(){
		                                    	/* 根据当前页面展示条数，重新计算总页数 */
		                                    	countPageNo();
		                                    	$("tbody").html("");
		                                    	/* 每页展示多少条数据 */
												var num = $("#productorder_length").val();
												/* 当前页码 */
												var curPage = $("#curPage").text();
			                                    $.ajax({
			                                            url: "../../../findByPageno.category",
			                                            dataType: "json",
			                                            type: "get",
			                                            data: {
			                                            	num: num,
			                                            	curPage: curPage
			                                            },
			                                            success: function (jsonAll) {
			                                                for (let i = 0; i < jsonAll.length; i++) {
			                                                	$(
			                                                		"<tr>"+
																	"<td>"+jsonAll[i].id+"</td>"+
																	"<td>"+jsonAll[i].name+"</td>"+
																	"<td>"+jsonAll[i].descr+"</td>"+
																	"<td>"+jsonAll[i].pid+"</td>"+
																	"<td>"+jsonAll[i].leaf+"</td>"+
																	"<td>"+jsonAll[i].grade+"</td>"+
																	"<td><button type='button' data-id='"+jsonAll[i].id+"' data-name='"+jsonAll[i].name+"' data-descr='"+jsonAll[i].descr+"' data-pid='"+jsonAll[i].pid+"' data-leaf='"+jsonAll[i].leaf+"' data-grade='"+jsonAll[i].grade+"' class='btn btn-rounded btn-info btn-xs'  data-toggle='modal' data-target='#myModal'>"+
																	"编辑</button>"+
																	"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-rounded btn-danger btn-xs'onclick='del("+jsonAll[i].id+")'>删除</button></td></tr>"
																).appendTo("tbody");
			                                                }
			                                            }
			                                        });
		                                    });
		                                    
		                                });
										/* 首页 传第一页的给上一页的逻辑 */
										function firstPage(){
											/* 每页展示多少条数据 */
											var num = $("#productorder_length").val();
											$("tbody").html("");
											$("#curPage").text("1");
		                                    $.ajax({
		                                            url: "../../../pageUp.category",
		                                            dataType: "json",
		                                            type: "get",
		                                            data: {
		                                            	num: num,
		                                            	curPage: 1
		                                            },
		                                            success: function (jsonAll) {
		                                            	//修改当前页显示
		                                                for (let i = 0; i < jsonAll.length; i++) {
		                                                	$(
		                                                		"<tr>"+
																"<td>"+jsonAll[i].id+"</td>"+
																"<td>"+jsonAll[i].name+"</td>"+
																"<td>"+jsonAll[i].descr+"</td>"+
																"<td>"+jsonAll[i].pid+"</td>"+
																"<td>"+jsonAll[i].leaf+"</td>"+
																"<td>"+jsonAll[i].grade+"</td>"+
																"<td><button type='button' data-id='"+jsonAll[i].id+"' data-name='"+jsonAll[i].name+"' data-descr='"+jsonAll[i].descr+"' data-pid='"+jsonAll[i].pid+"' data-leaf='"+jsonAll[i].leaf+"' data-grade='"+jsonAll[i].grade+"' class='btn btn-rounded btn-info btn-xs'  data-toggle='modal' data-target='#myModal'>"+
																"编辑</button>"+
																"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-rounded btn-danger btn-xs'onclick='del("+jsonAll[i].id+")'>删除</button></td></tr>"
															).appendTo("tbody");
		                                                }
		                                            }
		                                        });
											}
										/* 尾页 传最后一页给下一页逻辑 */
										function lastPage(){
											
											/* 每页展示多少条数据 */
											var num = $("#productorder_length").val();
											//当前总页数
											var sumPage = $("#sumPage").text();
											$("tbody").html("");
											$("#curPage").text(sumPage);
		                                    $.ajax({
		                                            url: "../../../pageDown.category",
		                                            dataType: "json",
		                                            type: "get",
		                                            data: {
		                                            	num: num,
		                                            	curPage: sumPage,
		                                            	sumPage: sumPage
		                                            },
		                                            success: function (jsonAll) {
		                                            	//修改当前页显示
		                                                for (let i = 0; i < jsonAll.length; i++) {
		                                                	$(
		                                                		"<tr>"+
																"<td>"+jsonAll[i].id+"</td>"+
																"<td>"+jsonAll[i].name+"</td>"+
																"<td>"+jsonAll[i].descr+"</td>"+
																"<td>"+jsonAll[i].pid+"</td>"+
																"<td>"+jsonAll[i].leaf+"</td>"+
																"<td>"+jsonAll[i].grade+"</td>"+
																"<td><button type='button' data-id='"+jsonAll[i].id+"' data-name='"+jsonAll[i].name+"' data-descr='"+jsonAll[i].descr+"' data-pid='"+jsonAll[i].pid+"' data-leaf='"+jsonAll[i].leaf+"' data-grade='"+jsonAll[i].grade+"' class='btn btn-rounded btn-info btn-xs'  data-toggle='modal' data-target='#myModal'>"+
																"编辑</button>"+
																"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-rounded btn-danger btn-xs'onclick='del("+jsonAll[i].id+")'>删除</button></td></tr>"
															).appendTo("tbody");
		                                                }
		                                            }
		                                        });
											}
										
										/* 下一页 */
										function pageDown(){
											
											/* 每页展示多少条数据 */
											var num = $("#productorder_length").val();
											/* 当前页码 */
											var curPage = $("#curPage").text();
											var nextPage = parseInt(curPage);
											//当前总页数
											var sumPage = $("#sumPage").text();
											//如果当前页不是最后一页，当前页再加一，否则不变
											if(curPage != sumPage){
												nextPage = parseInt(curPage) + 1;
											}
											$("tbody").html("");
											$("#curPage").text(nextPage);
		                                    $.ajax({
		                                            url: "../../../pageDown.category",
		                                            dataType: "json",
		                                            type: "get",
		                                            data: {
		                                            	num: num,
		                                            	curPage: curPage,
		                                            	sumPage: sumPage
		                                            },
		                                            success: function (jsonAll) {
		                                            	//修改当前页显示
		                                                for (let i = 0; i < jsonAll.length; i++) {
		                                                	$(
		                                                		"<tr>"+
																"<td>"+jsonAll[i].id+"</td>"+
																"<td>"+jsonAll[i].name+"</td>"+
																"<td>"+jsonAll[i].descr+"</td>"+
																"<td>"+jsonAll[i].pid+"</td>"+
																"<td>"+jsonAll[i].leaf+"</td>"+
																"<td>"+jsonAll[i].grade+"</td>"+
																"<td><button type='button' data-id='"+jsonAll[i].id+"' data-name='"+jsonAll[i].name+"' data-descr='"+jsonAll[i].descr+"' data-pid='"+jsonAll[i].pid+"' data-leaf='"+jsonAll[i].leaf+"' data-grade='"+jsonAll[i].grade+"' class='btn btn-rounded btn-info btn-xs'  data-toggle='modal' data-target='#myModal'>"+
																"编辑</button>"+
																"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-rounded btn-danger btn-xs'onclick='del("+jsonAll[i].id+")'>删除</button></td></tr>"
															).appendTo("tbody");
		                                                }
		                                            }
		                                        });
											}
										/* 上一页 */
										function pageUp(){
											/* 每页展示多少条数据 */
											var num = $("#productorder_length").val();
											/* 当前页码 */
											var curPage = $("#curPage").text();
											var prePage = parseInt(curPage);
											//如果当前页不是第一页再减一，否则不变
											if(curPage != 1){
												prePage = parseInt(curPage) - 1;
											}
											
											$("tbody").html("");
											$("#curPage").text(prePage);
		                                    $.ajax({
		                                            url: "../../../pageUp.category",
		                                            dataType: "json",
		                                            type: "get",
		                                            data: {
		                                            	num: num,
		                                            	curPage: curPage
		                                            },
		                                            success: function (jsonAll) {
		                                            	//修改当前页显示
		                                                for (let i = 0; i < jsonAll.length; i++) {
		                                                	$(
		                                                		"<tr>"+
																"<td>"+jsonAll[i].id+"</td>"+
																"<td>"+jsonAll[i].name+"</td>"+
																"<td>"+jsonAll[i].descr+"</td>"+
																"<td>"+jsonAll[i].pid+"</td>"+
																"<td>"+jsonAll[i].leaf+"</td>"+
																"<td>"+jsonAll[i].grade+"</td>"+
																"<td><button type='button' data-id='"+jsonAll[i].id+"' data-name='"+jsonAll[i].name+"' data-descr='"+jsonAll[i].descr+"' data-pid='"+jsonAll[i].pid+"' data-leaf='"+jsonAll[i].leaf+"' data-grade='"+jsonAll[i].grade+"'"+ 
																"class='btn btn-rounded btn-info btn-xs'  data-toggle='modal' data-target='#myModal'  data-toggle='modal' data-target='#myModal'>"+
																"编辑</button>"+
																"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-rounded btn-danger btn-xs' onclick='del("+jsonAll[i].id+")'>删除</button></td></tr>"
															).appendTo("tbody");
		                                                }
		                                            }
		                                        });
											
											}
										
										function del(id) {
											if (confirm("你确定删除吗")) {
												window.location.href = "deleteCategory.category?id="+id
											}
										}
										
									</script>
								</tbody>						
							</table>
							
								
							<!-- 翻页 -->
							<div class="row">
								<div class="col-sm-12 col-md-7"></div>
								<div class="col-sm-12 col-md-5">
									<div class="dataTables_paginate paging_simple_numbers" id="productorder_paginate">
									<ul class="pagination">
										<li class="paginate_button page-item previous" id="productorder_previous">
											<a href="javascript:firstPage()" aria-controls="productorder" data-dt-idx="0" tabindex="0" class="page-link">首页</a>
										</li>
										<li class="paginate_button page-item previous" id="productorder_previous">
											<a href="javascript:pageUp()" aria-controls="productorder" data-dt-idx="0" tabindex="0" class="page-link">上一页</a>
										</li>
										<li class="paginate_button page-item active">
											第<a id="curPage" href="#" aria-controls="productorder" data-dt-idx="1" tabindex="0" class="page-link">1</a>页
										</li>
										
										<li class="paginate_button page-item next" id="productorder_next">
											<a href="javascript:pageDown()" aria-controls="productorder" data-dt-idx="3" tabindex="0" class="page-link">下一页</a>
										</li>
										<li class="paginate_button page-item previous" id="productorder_previous">
											<a href="javascript:lastPage()" aria-controls="productorder" data-dt-idx="0" tabindex="0" class="page-link">尾页</a>
										</li>
										
										<li>
											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;&nbsp;<label id="sumPage">21</label>&nbsp;&nbsp;页
										</li>
										<li>
											
										</li>
									</ul>
								</div>
							</div>
							
							</div>
							
						</div>
					</div>
					<!-- 第二个panel结束 -->
				</div>
            </div>
            <!-- /.box-body -->
          </div>

  </div>
 <!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel"></h4>
	            </div>
	            <div class="modal-body">
	            	<div class="box box-solid bg-primary">
		                <div class="box-header">
		                    <h4 class="box-title">
		                    		修改类别
		                    </h4>
		                </div>
		
		                <div class="box-body">
		    
		                    <form action="updateCategory.category" method="post">
		                        <div class="form-body">
		                            <div class="row">
		                                <div class="col-md-6">
		                                    <div class="form-group">
		                                        <label class="text-info">id
		                                        	<span class="badge badge-danger">
		                                    			不可修改
		                                    		</span>
		                                        </label>
		                                        <span id="modal_id" class="form-control"></span>
		                                        <input id="id" type="hidden" name="modal_id"/>
		                                    </div>
		                                </div>
		                                <!--/span-->
		                                <div class="col-md-6">
		                                    <div class="form-group">
		                                    	<label class="text-info">类别名称
		                                    		<span class="badge badge-default">
		                                    			可修改
		                                    		</span>
		                                    	</label>
		                                        <input id="modal_name" name="modal_name" type="text" class="form-control" required/>
		                                    </div>
		                                </div>
		                                <!--/span-->
		                            </div>
		                            <!--/row-->
		                            <!--/row-->
		                            <div class="row">
		                                <div class="col-md-6">
		                                    <div class="form-group">
		                                        <label class="text-info">类别等级
		                                        	<span class="badge badge-danger">
		                                    			不可修改
		                                    		</span>
		                                        </label>
		                                        <span id="modal_grade" class="form-control"></span>
		                                    </div>
		                                </div>
		                                <!--/span-->
		                                <div class="col-md-6">
		                                    <div class="form-group">
		                                        <label class="text-info">是否为叶子结点
		                                        	<span class="badge badge-danger">
		                                    			不可修改
		                                    		</span>
		                                        </label>
		                                        <span id="modal_leaf" class="form-control"></span>
		                                    </div>
		                                </div>
		                                <!--/span-->
		                            </div>
		                            
		                            <div class="row">
		
		                                <!--/span-->
		                            </div>
		                            <div class="row">
		                                <div class="col-md-12">
		                                    <div class="form-group">
		                                        <label class="text-info">描述
		                                        	<span class="badge badge-default">
		                                    			可修改
		                                    		</span>
		                                        </label>
		                                        <textarea id="modal_descr" name="modal_descr" class="form-control" rows="4" name="descr" required></textarea>
		                                    </div>
		                                </div>
		                            </div>
		                            <!--/row-->
		                            <div class="row">
		
		                            </div>
		                        </div>
		                        <div class="form-actions mt-10">
		                            <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> 保存</button>
		                            <button class="btn btn-danger"  data-dismiss="modal"> <i class="fa fa-close"></i> 取消</button>
		                        </div>
		                    </form>
		                    
		                    
		                </div>
		            </div>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	<script type="text/javascript">
      /* 将页面中的数据传给模态框 */
      $('#myModal').on('shown.bs.modal', function (event) {
	      var btn = $(event.relatedTarget); //触发事件的按钮
	      var modal = $(this);  //当前模态框
	      var id = btn.data('id')
	      var name = btn.data('name')
	      var descr = btn.data('descr')
	      var pid = btn.data('pid')
	      var leaf = btn.data('leaf')
	      var grade = btn.data('grade')
	      $('#modal_id').text(id)
	      $('#modal_name').val(name)
	      $('#modal_descr').text(descr)
	      $('#modal_pid').text(pid)
	      $('#modal_leaf').text(leaf)
	      $('#modal_grade').text(grade)
	      /* 在input隐藏域中传递id */
	      $('#id').val(id)
	});
    </script>
	
	
	
   <footer class="main-footer">
    <div class="pull-right d-none d-sm-inline-block">
        <ul class="nav nav-primary nav-dotted nav-dot-separated justify-content-center justify-content-md-end">
		  <li class="nav-item">
			<a class="nav-link" href="javascript:void(0)">FAQ</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#">Purchase Now</a>
		  </li>
		</ul>
    </div>
	  &copy; 2018 <a href="https://www.multipurposethemes.com/">Multi-Purpose Themes</a>. All Rights Reserved.
  </footer>
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-light">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li class="nav-item"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li class="nav-item"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-cog fa-spin"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-birthday-cake bg-danger"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Admin Birthday</h4>

                <p>Will be July 24th</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-user bg-warning"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Jhone Updated His Profile</h4>

                <p>New Email : jhone_doe@demo.com</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-envelope-o bg-info"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Disha Joined Mailing List</h4>

                <p>disha@demo.com</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-file-code-o bg-success"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Code Change</h4>

                <p>Execution time 15 Days</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Web Design
                <span class="label label-danger pull-right">40%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 40%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Update Data
                <span class="label label-success pull-right">75%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-success" style="width: 75%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Order Process
                <span class="label label-warning pull-right">89%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-warning" style="width: 89%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Development 
                <span class="label label-primary pull-right">72%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-primary" style="width: 72%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <input type="checkbox" id="report_panel" class="chk-col-grey" >
			<label for="report_panel" class="control-sidebar-subheading ">Report panel usage</label>

            <p>
              general settings information
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <input type="checkbox" id="allow_mail" class="chk-col-grey" >
			<label for="allow_mail" class="control-sidebar-subheading ">Mail redirect</label>

            <p>
              Other sets of options are available
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <input type="checkbox" id="expose_author" class="chk-col-grey" >
			<label for="expose_author" class="control-sidebar-subheading ">Expose author name</label>

            <p>
              Allow the user to show his name in blog posts
            </p>
          </div>
          <!-- /.form-group -->

          <h3 class="control-sidebar-heading">Chat Settings</h3>

          <div class="form-group">
            <input type="checkbox" id="show_me_online" class="chk-col-grey" >
			<label for="show_me_online" class="control-sidebar-subheading ">Show me as online</label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <input type="checkbox" id="off_notifications" class="chk-col-grey" >
			<label for="off_notifications" class="control-sidebar-subheading ">Turn off notifications</label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">              
              <a href="javascript:void(0)" class="text-red margin-r-5"><i class="fa fa-trash-o"></i></a>
              Delete chat history
            </label>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  
  <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
	

	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- Fab Admin App -->
	<script src="../../js/template.js"></script>
	
	<!-- Fab Admin for demo purposes -->
	<script src="../../js/demo.js"></script>
	

</body>
</html>
